import './Mars3dSetUp.scss'
import { Button, Collapse } from 'antd'
import PropTypes from 'prop-types'

import { optionsList } from '../../Assets/Params'
import { UseConfigSection } from '../../Template/FormTemplate'



const LineTemp = ({ data }) => {
    LineTemp.propTypes = { data: PropTypes.object }
    const list = [
        { key: 101, uuid: 'line', label: '是否启用边界线', type: 'RadioTemp', name: 'isEnabled', options: optionsList.isEnable },
        { key: 102, uuid: 'line', label: '边界线宽', type: 'InputNumberTemp', name: 'width' },
        { key: 103, uuid: 'line', label: '线体透明', type: 'SliderTemp', name: 'opacity', options: { min: 0, max: 1, step: 0.1 } },
        { key: 104, uuid: 'line', label: '是否贴地', type: 'RadioTemp', name: 'clampToGround', options: optionsList.isYeas },
        { key: 200, uuid: 'line', label: '特效样式', type: 'MaterialType' },
    ]
    return UseConfigSection(data, list)
}

const WallTemp = ({ data }) => {
    WallTemp.propTypes = { data: PropTypes.object }
    const list = [
        { key: 101, uuid: 'wall', label: '是否启用边界墙', type: 'RadioTemp', name: 'isEnabled', options: optionsList.isEnable },
        { key: 102, uuid: 'wall', label: '墙体高度', type: 'InputNumberTemp', name: 'diffHeight' },
        { key: 103, uuid: 'wall', label: '坐标高度', type: 'InputNumberTemp', name: 'setHeight' },
        { key: 104, uuid: 'wall', label: '是否闭合', type: 'RadioTemp', name: 'closure', options: optionsList.isYeas },
        { key: 105, uuid: 'wall', label: '是否边框', type: 'RadioTemp', name: 'outline', options: optionsList.isYeas },
        { key: 106, uuid: 'wall', label: '边框颜色', type: 'ColorPickerTemp', name: 'outlineColor', },
        { key: 107, uuid: 'wall', label: '边框透宽度', type: 'InputNumberTemp', name: 'outlineWidth', },
        { key: 108, uuid: 'wall', label: '边框透明度', type: 'InputNumberTemp', name: 'outlineOpacity', },
        { key: 200, uuid: 'wall', label: '特效样式', type: 'MaterialType' },
    ]
    return UseConfigSection(data, list)
}
const CoveTemp = ({ data }) => {
    CoveTemp.propTypes = { data: PropTypes.object }
    const list = [
        { key: 101, uuid: 'cove', label: '是否启用覆盖面', type: 'RadioTemp', name: 'isEnabled', options: optionsList.isEnable },
        { key: 102, uuid: 'cove', label: '覆盖面高度', type: 'InputNumberTemp', name: 'diffHeight' },
        { key: 103, uuid: 'cove', label: '是否贴地', type: 'RadioTemp', name: 'clampToGround', options: optionsList.isYeas },
        { key: 201, uuid: 'cove', label: '是否边框', type: 'RadioTemp', name: 'outline', options: optionsList.isYeas },
        { key: 202, uuid: 'cove', label: '边框颜色', type: 'ColorPickerTemp', name: 'outlineColor' },
        { key: 203, uuid: 'cove', label: '边框透宽度', type: 'InputNumberTemp', name: 'outlineWidth' },
        { key: 204, uuid: 'cove', label: '边框透明度', type: 'InputNumberTemp', name: 'outlineOpacity' },
        { key: 300, uuid: 'cove', label: '特效样式', type: 'MaterialType' },
    ]
    return UseConfigSection(data, list)
}


const Mars3dFitA07 = ({ data, Off, ModalEvent }) => {
    Mars3dFitA07.propTypes = { data: PropTypes.object, Off: PropTypes.func, ModalEvent: PropTypes.object }
    const { FitA07 } = data
    const items = [
        { key: 101, label: '边界线参数', children: <LineTemp data={FitA07} /> },
        { key: 102, label: '边界墙参数', children: <WallTemp data={FitA07} /> },
        { key: 103, label: '覆盖面参数', children: <CoveTemp data={FitA07} /> },
    ]
    const list = [
        { key: 101, uuid: 'FitA07', label: '边界设置', type: 'TreeMultipleTemp', name: 'mapTiles', options: optionsList.mapTiles },
        { key: 102, uuid: 'FitA07', label: '是否启用挖嵌', type: 'RadioTemp', name: 'isClip', options: optionsList.isEnable },
    ]

    const onSubmit = () => {
        ModalEvent.emit({ type: 'scene', data })
        Off()
    }

    return (
        <div className='Mars3dSetUp Mars3dFitA07'>
            <div className='FormList'>
                {UseConfigSection(data, list)}
                <Collapse items={items} bordered={false} />
            </div>
            <div className='Button'>
                <Button type='primary' danger onClick={Off}>取消</Button>
                <Button type='primary' onClick={onSubmit}>保存</Button>
            </div>
        </div>
    );
};

export default Mars3dFitA07;